<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第十一节课上课案例</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			canvas{
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<input type="button" value="笔" id="hb"/>
			<input type="button" value="实心矩形" id="sxjx"/>
			<input type="button" value="空心矩形" id="kxjx"/>
			<input type="button" value="空心圆" id="kxy"/>
			<input type="button" value="实心圆" id="sxy"/>
		</div>
	</body>
	<script>
		window.onload = function(){
			let oCanvas = document.getElementById('canvas');
			console.dir(oCanvas)
			let yPen = oCanvas.getContext("2d");
			console.dir(yPen)  

			document.getElementById('hb').onclick = function() {
				var e;
				document.onmousedown = function(e) {
					yPen.moveTo(e.pageX - oCanvas.offsetLeft,e.pageY - oCanvas.offsetTop);
				document.onmousemove = function(e) {
					yPen.lineTo(e.pageX - oCanvas.offsetLeft,e.pageY - oCanvas.offsetTop);
		            yPen.stroke();
					}
				document.onmouseup = function(e) {
					document.onmousemove = null;
					}
				}
			}
			
			document.getElementById('sxjx').onclick = function() {
				var x,y,x1,y2
				var f=0;
				document.onmousedown = function(e) {
					x=+(e.pageX-oCanvas.offsetLeft);
					y=+(e.pageY-oCanvas.offsetTop);
					x1=x;
					y1=y;
					f=1;
					console.dir(x);
				document.onmousemove = function(e) {
					if(f==1){
					yPen.clearRect(x1,y1,(x-x1),y-y1);
					x=(e.pageX-oCanvas.offsetLeft);
					y=(e.pageY-oCanvas.offsetTop);
					
					yPen.fillRect(x1,y1,(x-x1),y-y1);
					}
				}
				document.onmouseup = function(e) {
					f=0
					x=(e.pageX-oCanvas.offsetLeft);
					y=(e.pageY-oCanvas.offsetTop);
					
					yPen.fillRect(x1,y1,(x-x1),y-y1);
				}
				console.dir(x);
				}
			}
			
			document.getElementById('kxjx').onclick = function() {
				var x,y,x1,y2,h
				var f=0;
				document.onmousedown = function(e) {
					x=+(e.pageX-oCanvas.offsetLeft);
					y=+(e.pageY-oCanvas.offsetTop);
					x1=x;
					y1=y;
					f=1;
					console.dir(x);
				document.onmousemove = function(e) {
					x=(e.pageX-oCanvas.offsetLeft);
					y=(e.pageY-oCanvas.offsetTop);
					if(f==1){
						yPen.clearRect(0,0,500,500);
						yPen.strokeRect(x1,y1,(x-x1),y-y1);
						}
					}
				document.onmouseup = function(e) {
					f=0
					console.dir(x);
					}
				}
			}
			
			document.getElementById('sxy').onclick = function() {
				var x,y,x1,y2,h
				var f=0;
				document.onmousedown = function(e) {
					x=+(e.pageX-oCanvas.offsetLeft);
					y=+(e.pageY-oCanvas.offsetTop);
					x1=x;
					y1=y;
					f=1;
					console.dir(x);
				document.onmousemove = function(e) {
					x=(e.pageX-oCanvas.offsetLeft);
					y=(e.pageY-oCanvas.offsetTop);
					if(f==1){
						yPen.clearRect(0,0,500,500);
						x=x-x1;
						y=y-y1
						yPen.beginPath();
						h=Math.sqrt(y*y+x*x);
						yPen.arc(x1,y1,h,0,Math.PI*2,false);
						
						yPen.fill();
						yPen.closePath();
						}	
					}
				document.onmouseup = function(e) {
					f=0
					console.dir(x);
					}
				}
			}
			
			document.getElementById('kxy').onclick = function() {
				var x,y,x1,y2,h
				var f=0;
				document.onmousedown=function(e){
					x=+(e.pageX-oCanvas.offsetLeft);
					y=+(e.pageY-oCanvas.offsetTop);
					x1=x;
					y1=y;
					f=1;
					console.dir(x);
				document.onmousemove=function(e){
					x=(e.pageX-oCanvas.offsetLeft);
					y=(e.pageY-oCanvas.offsetTop);
					if(f==1){
						yPen.clearRect(0,0,500,500);
						x=x-x1;
						y=y-y1
						h=Math.sqrt(y*y+x*x);
						yPen.beginPath();
						yPen.arc(x1,y1,h,0,Math.PI*2,false);
						yPen.stroke();
						yPen.closePath()
						}
					}
				document.onmouseup=function(e){
					f=0
					console.dir(x);
					}
				}
			}
		}
	</script>
</html>